<template>
  <list-group :dataList.sync="tableData"
              :loading="loading"
              type="company"
              prop="company"
              secondProp="code"
              @saveHandler="saveHandler"
              @delHandler="delHandler"
              @change="getTableData">
    <template v-slot:middle="slotProps">
      <el-form :model="slotProps.item"
               class="l-h-1-6em"
               label-width="60px"
               :rules="rules"
               ref="form">
        <div v-show="slotProps.item.inEdit!==true">
          <span class="text-info">{{$t('investment.loanPrincipal')}}</span>
          <span>{{parseFloat(slotProps.item.principal)}}</span>
          <div>
            <span class="text-info">{{(parseFloat(slotProps.item.returnRate)*100).toFixed(2)}}%</span>
            <span class="text-info">{{getInterestBearingDays(slotProps.item)}}{{$t('investment.day')}}</span>
            <span class="text-info">{{$t('investment.accruedIncome')}}{{getPrincipalReturn(slotProps.item)}}</span>
          </div>
        </div>
        <span v-show="slotProps.item.inEdit===true">
          <el-form-item prop="principal"
                        :label="$t('investment.loanPrincipal')">
            <el-input v-model="slotProps.item.principal"
                      class="w-130px"></el-input>
          </el-form-item>
          <el-form-item prop="returnRate"
                        :label="$t('investment.annualRateReturn')">
            <el-input v-model="slotProps.item.returnRate"
                      class="w-130px"></el-input>
          </el-form-item>
          <el-form-item prop="startDate"
                        :label="$t('investment.start')">
            <el-date-picker unlink-panels
                            v-model="slotProps.item.startDate"
                            class="w-130px"
                            type="date">
            </el-date-picker>

          </el-form-item>
          <el-form-item prop="endDate"
                        :label="$t('investment.end')">
            <el-date-picker unlink-panels
                            v-model="slotProps.item.endDate"
                            class="w-130px"
                            type="date">
            </el-date-picker>

          </el-form-item>
        </span>
      </el-form>
    </template>
  </list-group>
</template>
<script>
import { queryInvestmentList, upsertInvestment, deleteInvestment } from '@/assets/api'
import validationUtil from '@/assets/utils/validationUtil'
import ListGroup from '@/components/common/listGroup/Index.vue'
const BLUR = 'blur'
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      dateRange: [],
      rules: {
        startDate: [{ required: true, message: this.$t('validationMessage.inputRequired'), trigger: BLUR }],
        endDate: [{ required: true, message: this.$t('validationMessage.inputRequired'), trigger: BLUR }],
        returnRate: [
          { required: true, message: this.$t('validationMessage.inputRequired'), trigger: BLUR },
          { validator: validationUtil.isFloat, trigger: BLUR },
          { min: 0, max: 1, validator: validationUtil.numberRange, trigger: BLUR }
        ],
        code: [
          { required: true, message: this.$t('validationMessage.inputRequired'), trigger: BLUR },
          { max: 1000, message: this.$t('validationMessage.lengthRange', { min: 1, max: 1000 }), trigger: BLUR }
        ],
        principal: [
          { required: true, message: this.$t('validationMessage.inputRequired'), trigger: BLUR },
          { validator: validationUtil.isFloat, trigger: BLUR },
          { min: 0, max: 1000000000, validator: validationUtil.numberRange, trigger: BLUR }
        ]
      }
    }
  },
  components: { ListGroup },
  mounted () {
    this.getTableData()
  },
  methods: {
    getTableData () {
      this.loading = true
      queryInvestmentList({}).then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 计算基本年化利息
     */
    getPrincipalReturn (item) {
      return this.getReturn(item.principal, item.returnRate, this.getInterestBearingDays(item))
    },
    /**
     * 计算利息
     */
    getReturn (principal, returnRate, days) {
      return (((parseFloat(principal) * parseFloat(returnRate)) / 365) * days).toFixed(2)
    },
    /**
     * 计算计息天数
     */
    getInterestBearingDays (item) {
      return (((new Date().getTime() - new Date(item.startDate).getTime()) / (1000 * 60 * 60 * 24)) - 1).toFixed(0)
    },
    delHandler (index) {
      this.loading = true
      deleteInvestment({ id: this.tableData[index].id }).then(res => {
        this.$message({ type: 'success', message: this.$t('common.deleted') })
        this.getTableData()
      })
    },
    saveHandler (index) {
      this.loading = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.tableData[index].type = 'p2p'
          upsertInvestment(this.tableData[index]).then(
            res => {
              this.getTableData()
              this.$emit('updated')
            }, () => {
              this.getTableData()
            }
          )
        }
      })
    }
  }
}
</script>
